<!-- 首页 四个卡片选项卡组件 -->
<template>
  <div class="fourChoiceCard">

    <div class="fourChoiceCardTil">

      <div class="cardTil" v-for="(item, index) in tabs" :key="index" @click="selectTab(index)">
        <img :src="item.imgUrl" alt="">
        <div :class="{ 'cardTilText': true, 'active': currentIndex === index }">
          {{ $t(item.til) }}
        </div>
      </div>

    </div>

    <div class="cardText">
      <ul>
        <li v-for="(item, index) in currentTabContent">

          <span>
            <el-icon>
              <Check />
            </el-icon>
            {{ $t(item) }}
          </span>
        </li>
      </ul>
    </div>

  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Check } from "@element-plus/icons-vue";

// 导入图片，img 标签可以动态使用
import { home4img } from "@/utils/imgUrl.js";
import { home5img } from "@/utils/imgUrl.js";
import { home6img } from "@/utils/imgUrl.js";
import { home7img } from "@/utils/imgUrl.js";


// 当前选中的选项卡索引
const currentIndex = ref(0);

const tabs = ref([
  // 功能  
  {
    til: 'home.function',
    imgUrl: home4img,
    content: [
      'home.FullToken',
      'home.MultipleTokens',
      'home.CallbackAndReissue',
      'home.AutomaticSystem',
      'home.RealTimeCollection',
      'home.InstantNotification',
    ],
  },
  // 防护
  {
    til: 'home.protect',
    imgUrl: home5img,
    content: [
      'home.APIInterfaceInfo',
      'home.PublicKey',
      'home.MultiWallet',
    ],
  },
  // 保障
  {
    til: 'home.Guarantee',
    imgUrl: home6img,
    content: [
      'home.EmployeeOperationPermissions',
      'home.EmployeeOperationRecord',
      'home.EmployeesOnlySmallSubWallets',
      'home.ExcessTransfer',
      'home.EmployeesWhoLog',
    ],
  },
  // 接入
  {
    til: 'home.Access',
    imgUrl: home7img,
    content: [
      'home.StandardInterface',
      'home.OpenAPI',
      'home.MultilingualSDK',
      'home.DetailedInterfaceDocument',
      'home.TechnicalSupport',
    ],
  }
])

// 方法，用于选择选项卡  
const selectTab = (index) => {
  currentIndex.value = index;
};

// 计算属性，返回当前选项卡的内容  
const currentTabContent = computed(() => {
  return tabs.value[currentIndex.value].content;
});



</script>

<style lang="less" scoped>
.fourChoiceCard {

  .fourChoiceCardTil {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;

    .cardTil:hover{
      cursor: pointer;
    }

    .cardTil {
      width: 1.5rem;
      height: 1.5rem;
      padding: 0.1rem;
      font-size: 0.2rem;
      font-weight: bold;

      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;

      .cardTilText {
        width: 1rem;
        height: 0.3rem;
        // border-bottom: 2px solid #000;
      }

      .cardTilText.active {
        border-bottom: 2px solid #000;
      }

    }

  }

  .cardText {
    margin-top: 0.2rem;

    ul {

      li {
        text-align: left;

        span {

          .el-icon {
            vertical-align: middle;
          }

          display: inline-block;
          font-size: 0.18rem;
          padding-top: 0.1rem;
          padding-bottom: 0.1rem;
        }
      }

    }

  }

}

@media (max-width: 600px) {

  .cardText {
    margin-top: 0.2rem;
    // white-space: nowrap;

    ul {
      margin: 0 auto;
    }

  }

}
</style>